<template>
  <div>
    <modal-view
      ref="modalView"
      :submit-loading="true"
      title="标签库"
      append-to-body
      @on-close="onClose"
      @on-submit="onSubmit"
    >
      <div class="page-body" v-loading="dataLoading">
        <div class="page-left">
          <el-table
            ref="leftTable"
            :data="ColData"
            stripe
            height="100%"
            width="100%"
            size="mini"
            @current-change="ColRowChange"
          >
            <el-table-column width="36" align="center">
              <el-radio
                class="app-table-radio"
                v-model="selectCode"
                :label="scope.row.Code"
                slot-scope="scope"
              ></el-radio>
            </el-table-column>
            <el-table-column prop="Name" label="组名称"></el-table-column>
          </el-table>
        </div>
        <div class="page-content" v-loading="tagLoading">
          <div class="page-taglist-header">
            <el-input
              placeholder="请输入内容"
              v-model="searchValue"
              size="mini"
              style="width:200px;margin-right:10px"
              @keyup.enter.native="onSearch"
            >
              <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
            </el-input>
          </div>
          <div class="page-taglist-body page-taglist-body-content">
            <el-tag
              class="page-taglist-tag"
              v-for="item in tagList"
              :key="item.Rown"
              effect="plain"
              @click="addTag(item)"
            >{{ item.LabelTag }}</el-tag>
          </div>
          <div class="page-content-footer">
            <el-pagination
              :page-size="pageSize"
              :total="total"
              layout="total, prev, pager, next, jumper"
              @current-change="setPage"
            ></el-pagination>
          </div>
        </div>
        <div class="page-right">
          <div class="page-taglist-header">
            <el-button size="mini" type="danger" :disabled="delDis" @click="delRightTag">删除</el-button>
          </div>
          <div class="page-taglist-body">
            <el-tag
              class="page-taglist-tag"
              v-for="item in rightTableData"
              :key="item.LabelTag"
              :effect="item._isSelect ? 'dark' : 'plain'"
              @click="item._isSelect = !item._isSelect"
            >{{ item.LabelTag }}</el-tag>
          </div>
        </div>
      </div>
    </modal-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import ModalView from "@/components/ModalView";

import { objArraySet } from "@/config/globalMethod";
import { getSingleList } from "../../api/currency";
import { request } from "../../library/request";

interface TagItem {
  LabelTag: string;

  /**
   * 用来表示是否为选中状态
   */
  _isSelect?: boolean;
}

@Component({
  name: "TagLib",
  components: {
    "el-table": Table,
    "el-table-column": TableColumn,
    "el-radio": Radio,
    "el-input": Input,
    "el-button": Button,
    "el-tag": Tag,
    "el-pagination": Pagination,
    ModalView
  },
  filters: {}
})
export default class TagLib extends Vue {
  //声明类型
  public $refs!: {
    leftTable: Table;
    modalView: ModalView;
  };

  /**
   * 全局loading
   */
  dataLoading: boolean = false;

  // created() {
  //   this.getData();
  // }

  /**
   * 页面展示
   */
  show(dataList: { name: string }[]) {
    //页面启动
    this.$refs.modalView.show(this.$data);
    this.getData();
    let list = dataList.map(item => {
      return {
        LabelTag: item.name
      };
    });
    this.addTag(list);
  }
  /**
   * 页面点击保存的时候
   */
  onSubmit(para: { success: any; fail: any }) {
    let list = this.rightTableData.map(item => {
      return {
        name: item.LabelTag
      };
    });
    this.$emit("on-change", list);
    para.success();
  }

  /**
   * 当页面关闭
   */
  onClose(data: any) {
    Object.assign(this.$data, data);
  }
  /**
   * =============================
   * 左侧table 数据
   * =============================
   */

  /**
   * 组名称
   */
  ColData: any[] = [];
  /**
   * 当前选中的组
   */
  selectCode: number = -1;
  /**
   * 左侧行被选中的时候
   */
  ColRowChange(currentRow: any, oldCurrentRow: any) {
    if (currentRow) {
      this.selectCode = currentRow.Code;
      this.getTagData();
    }
  }
  /**
   * 获取数据
   */
  getData() {
    this.dataLoading = true;
    getSingleList({
      docType: "LabelTag",
      actionType: "AllGroup"
    })
      .then((res: any) => {
        this.ColData = res.List;
        this.$nextTick(() => {
          this.$refs.leftTable.setCurrentRow(this.ColData[0]);
        });
      })
      .finally(() => {
        this.dataLoading = false;
      });
  }
  /**
   * =============================
   * 中间table 数据
   * =============================
   */
  tagLoading: boolean = false;
  /**
   *
   */
  pageSize: number = 100;
  /**
   * 当前数据数量
   */
  total: number = 0;
  /**
   * 搜索绑定
   */
  searchValue: string = "";
  /**
   * 确定搜索
   */
  searchData: string = "";
  /**
   * 列表信息
   */
  tagList: TagItem[] = [];
  /**
   * 获取中间数据
   */
  getTagData(page = 1) {
    this.tagLoading = true;
    request({
      url: "LabelTag/GetListAndTotal",
      data: {
        Group: this.selectCode,
        Searchv: this.searchData,
        Limit: this.pageSize,
        Start: (page - 1) * this.pageSize
      }
    })
      .then((res: any) => {
        this.tagList = res.List;
        this.total = res.Total;
      })
      .finally(() => {
        this.tagLoading = false;
      });
  }
  /**
   * 当点击搜索的时候
   */
  onSearch() {
    this.searchData = this.searchValue;
    this.getTagData();
  }
  /**
   * 调整页签
   */
  setPage(page: number) {
    this.getTagData(page);
  }
  /**
   * =============================
   * 右侧table 数据
   * =============================
   */
  /**
   * 右侧数据
   */
  rightTableData: TagItem[] = [];
  /**
   * 判断删除功能
   */
  get delDis() {
    let dis: boolean = true;
    for (let item of this.rightTableData) {
      if (item._isSelect) {
        dis = false;
        break;
      }
    }
    return dis;
  }
  /**
   * 添加一个tag
   */
  addTag(tag: TagItem | TagItem[]) {
    let list: TagItem[] = [];
    if (!(tag instanceof Array)) {
      //表示为单个的时候
      list.push(tag);
    } else {
      list = tag;
    }
    for (let item of list) {
      this.$set(item, "_isSelect", false);
      // item._isSelect = false;
    }
    //合并
    let listOn = this.rightTableData.concat(list);
    //去重
    list = objArraySet(listOn, "LabelTag");
    if (listOn.length > list.length) {
      this.$message.warning("已自动去除重复数据");
    }
    this.rightTableData = list;
  }
  /**
   * 删除一个
   */
  delRightTag() {
    let list: TagItem[] = [];
    for (let item of this.rightTableData) {
      if (!item._isSelect) {
        list.push(item);
      }
    }
    this.rightTableData = list;
  }
}
</script>

<style lang="less" scoped>
.page-body {
  display: flex;
  align-items: stretch;
  height: 350px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  .page-left {
    flex-basis: 150px;
    overflow: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
  }
  .page-content {
    flex-grow: 1;
    .page-taglist-body-content {
      height: calc(100% - 70px);
    }
  }
  .page-right {
    flex-shrink: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    flex-basis: 200px;
  }
  // 加载tag列表的
  .page-taglist-header {
    // 顶部数据
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 4px;
  }
  .page-taglist-body {
    // 内部数据
    height: calc(100% - 37px);
    overflow: auto;
    padding: 10px 0 0 10px;
    .page-taglist-tag {
      margin-right: 10px;
      margin-bottom: 10px;
      user-select: none;
      cursor: pointer;
      &:active {
        opacity: 0.5;
      }
    }
  }
  .page-content-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}
</style>
